<template>

  <div class="Collection">
    <!-- <van-tabs v-model:active="formData.isOpenBox">
      <van-tab title="已拆">

        <isOpenBox />
      </van-tab> -->
    <!-- <van-tab title="未拆"> -->
    <!-- <template #title>
      <span> 未拆</span><span class='badge' v-if="formData.count>=1">{{formData.count}}</span>
    </template> -->
    <!-- <van-row class="select-item">
      <van-col v-for="(item,index) in selectlist" :key="index">
        <span :class="formData.itemActive== item.id ? 'selectactive' : '' " @click="getmore(item.id,index)">{{item.name}}</span>
      </van-col>
    </van-row> -->
    <van-list v-model:loading="formData.loading" :finished="formData.finished" finished-text="我也是有底线的~" @load="onload"
      :immediate-check="false">
      <van-grid :column-num="2">
        <van-grid-item v-for="(item, index) in Contentlist" :key="index" :gutter="40">
          <div class="sellStaus" v-if="item.whereabouts">
            {{ item.whereabouts == 1 ? "出售中" : "" }}
          </div>
          <div class="col-warp">
            <div class="Content-product">
              <div class="img-box" :style="'background-image:url(' + item.collectionCover + ') '" @click="GoInner(item)"
                v-if="VideoIndexOf(item.collectionCover)">
                <div class="number">X {{ item.sumTotalNumber }}</div>
              </div>
              <div class="img-box" :style="'background-image:url(' + item.collectionCover + ') '" @click="GoInner(item)"
                v-else>
                <video :src="item.collectionCover" />
                <div class="number">X {{ item.sumTotalNumber }}</div>
              </div>

              <div class="cont" @click="GoInner(item)">
                <p>{{ item.collectionName }}</p>
                <van-row class="flex-warp">
                  <van-col span="10" class='txt'>{{ item.className ? item.className : "" }}</van-col>
                  <van-col span="14" class="linercolor">￥{{ item.amount }}</van-col>
                </van-row>
              </div>
            </div>
          </div>
        </van-grid-item>
      </van-grid>
    </van-list>
    <van-empty :image="require('@/assets/image/none.png')" description="暂无未拆盲盒" v-if="formData.loading" />
    <!-- </van-tab>
    </van-tabs> -->

  </div>

</template>
<script>
import { defineComponent, ref, reactive, toRefs, onMounted } from 'vue'
import { useStore } from "vuex";
import { useRouter } from "vue-router"
import isOpenBox from "./isOpenBox.vue";
import { VideoIndexOf } from "@/utils/phone";
import video from "@/components/video.vue";
import { userblindBoxIpage, IPageByState, cancelSell, openBlindBox } from "@/api/public";
export default defineComponent({
  components: {
    video
  },
  props: {
    menulist: {
      type: Array
    }
  },
  components: {
    isOpenBox
  },
  setup(props) {
    const store = useStore();
    const router = useRouter()
    const formData = reactive({
      finished: false,
      loading: true,
      // isOpenBox: 0,
      itemActive: null,
      pageNum: 1,
      pageSize: 1,
      total: 0,
      count: "0",
      propType: 0,
      sellStatus: null,
    })
    const Contentlist = ref([])

    const GoInner = (item) => {
      const type = formData.isOpenBox
      const cotionid = item.id
      if (item.sumTotalNumber >= 2) {
        router.push({
          path: '/moreBind',
          query: {
            id: item.blindBoxId,
            type: type,
            userCollectionId: item.userCollectionId
          }
        })
      } else {
        router.push({
          path: '/pageblindbox',
          query: {
            id: item.blindBoxId,
            type: type,
            userCollectionId: item.userCollectionId
          }
        })
      }

    }
    const onload = async () => {
      const data = {
        pageSize: formData.pageSize,
        pageNum: formData.pageNum,
        // openBlindBox: 0,
        sellStatus: formData.itemActive
      }
      const res = await userblindBoxIpage(formData)
      console.log(res.data.data.records)
      formData.loading = false
      formData.pageNum++
      formData.total = res.data.data.total
      Contentlist.value = Contentlist.value.concat(res.data.data.records)
      if (formData.total <= Contentlist.value.length) {
        formData.finished = true;
      }
      formData.loading = false
      console.log(formData.finished, Contentlist.value.length, formData.total)
    }
    const open = (id, str) => {
      const data = {
        id: id
      }
      openBlindBox(id).then(res => {
        if (res.data.success) {
          Toast(str + '开启成功')
          Contentlist.value = [];
          formData.sellType = 0
          formData.pageNum = 1
          formData.propType = 3
          formData.isActive = false
          formData.Active = true
          onload()
        } else {
          Toast(res.data.message)
        }
      })
    }
    const selectlist = reactive([
      { id: null, name: "全部状态" },
      { id: 0, name: "出售中" },
      { id: 1, name: "赠与中" },
    ])
    const getmore = (id, index) => {
      formData.loading = true
      formData.finished = false
      formData.sellStatus = id
      formData.pageNum = 1
      formData.itemActive = id
      Contentlist.value = []
      onload()
    }
    onMounted(() => {
      onload()
      const data = {
        pageSize: formData.page,
        pageNum: formData.size,
        propType: 3,
        // isOpenBox: 1

      }
      // blindBoxIpage(data).then(res => {
      //   formData.count = res.data.data.total
      // })
    })

    return {
      formData, selectlist, getmore, GoInner, onload, open, Contentlist, VideoIndexOf
    }

  }

})
</script>
<style lang="less" scoped>
.grid {
  position: relative;
}

.sellStaus {
  position: absolute;
  z-index: 9;
  background: rgba(0, 0, 0, 0.6);
  color: #eb0407;
  top: 50px;
  left: 40px;
  width: fit-content;
  border-radius: 10px;
  padding: 10px;
}

.number {
  position: absolute;
  height: 28px;
  font-size: 30px;
  font-family: Source Han Sans CN;
  font-weight: 600;
  color: #fefefe;
  // background: rgba(0, 0, 0, 0.9);
  z-index: 999;
  bottom: 10px;
  right: 0;
  padding: 20px;
  background: linear-gradient(-90deg, #37dc6d 0%, #34d1f9 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.badge {
  text-align: center;
  line-height: 26px;
  font-size: 21px;
  font-family: Source Han Sans CN;
  font-weight: normal;
  color: #ffffff;
  position: absolute;
  width: 26px;
  height: 26px;
  background: #df0024;
  border-radius: 50%;
  -webkit-text-fill-color: #ffffff !important;
}

.Collection {
  padding-bottom: 50px;

  .col-warp {
    .Content-product {
      border-radius: 40px 40px 0px 0px;

      width: 344px;
      // height: 543px;
      background: #282a2c;
      border-radius: 40px;

      .cont {
        padding: 15px 12px;

        p {
          height: 50px;
          font-size: 32px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #fff;
          line-height: 50px;
        }

        .txt {
          font-size: 26px;
          font-family: Source Han Sans CN;
          font-weight: 400;
          color: #b9c4c7;
          line-height: 48px;
        }

        .linercolor {
          text-align: right;
          font-size: 40px;
          font-family: Source Han Sans CN;
          font-weight: bold;
          color: #ffffff;
          line-height: 73px;

          background: linear-gradient(-90deg, #37dc6d 0%, #34d1f9 100%);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }

        .flex-warp {
          display: flex;
          align-items: center;
        }

        .Limit-warp {
          margin: 10px 0;

          span {
            font-size: 26px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            line-height: 48px;
          }

          span:nth-child(1) {
            color: #444442;
            font-size: 26px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            background: #f3e3bb;
            border-radius: 4px 0px 0px 4px;
            padding: 3px 12px;
          }

          span:nth-child(2) {
            padding: 3px 12px;
            background: #ffffff;
            border-radius: 4px;
            font-size: 26px;
            font-family: Source Han Sans CN;
            font-weight: 400;
            color: #fff;
            border: 1px solid;
            border-image: linear-gradient(0deg, #ff3f6e, #eb0407) 10 10;
            border-radius: 4px;
            line-height: 48px;
          }
        }
      }

      .img-box {
        position: relative;
        width: 100%;
        box-sizing: border-box;
        height: 334px;
        background-size: cover;
        border-radius: 40px 40px 0px 0px;
        border: 2px solid #ffffff;
        background-repeat: no-repeat;
        background-position: center center;
        overflow: hidden;

        video {
          width: 334px;
          height: 334px;
        }

        img {
          width: 260px;
          height: 204px;
        }
      }
    }
  }

  &:deep(.van-sticky--fixed) {
    background: #fff;
    height: auto !important;
  }

  &:deep(.van-hairline--top) {
    margin: 0px 10px;
    //   background: #161718;
    //   width: 94%;
    //   margin: 30px auto;
    border: none;
  }

  &:deep(.van-hairline--top:after) {
    border-top-width: 0px;
  }

  &:deep(.van-grid-item__content) {
    padding: 30px 0px 0px;
    background: transparent;
  }

  &:deep(.van-hairline:after) {
    border: none;
  }

  &:deep(.van-grid-item) {
    background: transparent;
  }

  .select-item {
    .selectactive {
      background: #282a2c;
      border: 1px solid #ffffff;
      color: #ffffff;
    }

    span {
      margin-top: 20px;
      padding: 22px 36px;
      display: inline-block;
      background: #282a2c;
      border-radius: 34px;
      font-size: 28px;
      font-family: Source Han Sans CN;
      font-weight: 400;
      color: #b9c4c7;
      line-height: 18px;
      margin-left: 20px;
    }
  }

  &:deep(.van-tabs__wrap) {
    width: 70% !important;
    margin: 0 auto;
    padding: 0px !important;
  }

  &:deep(.van-tabs__line) {
    background-image: url('../../../assets/image/tab-active.png') !important;
    background-size: 100% 100%;
  }

  &:deep(.van-tab--active) {
    font-size: 36px !important;
    font-family: Source Han Sans CN;
    font-weight: bold !important;
    line-height: 30px;

    background: linear-gradient(-90deg, #37dc6d 30%, #34d1f9 70%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }

  &:deep(.van-tab) {
    position: relative;
    font-size: 31px !important;
    font-family: Source Han Sans CN;
    font-weight: 400;
    color: #ffffff !important;
    opacity: 0.8 !important;
  }
}
</style>